Navigator.push() and Navigator.pop() are used to navigate pages

STEP 1: Create FirstRoute

                      class FirstRoute extends StatelessWidget {  
                          @override    
                          Widget build(BuildContext context) {  
                            return Scaffold(  
                              appBar: AppBar(  
                                title: Text('First Route'),  
                              ),  
                              body: Center(  
                                child: RaisedButton(  
                                  child: Text('Open route'),  
                                  onPressed: () {  
                                    // Navigate to second route when tapped.  
                                  },  
                                ),  
                              ),  
                            );  
                          }  
                        } 

                        

STEP 2: create SeconRoute

                        class SecondRoute extends StatelessWidget {  
                        @override    
                        Widget build(BuildContext context) {  
                          return Scaffold(  
                            appBar: AppBar(  
                              title: Text("Second Route"),  
                            ),  
                            body: Center(  
                              child: RaisedButton(  
                                onPressed: () {  
                                  // Navigate back to first route when tapped.  
                                },  
                                child: Text('Go back!'),  
                              ),  
                            ),  
                          );  
                        }  
                      } 

                      

STEP 3: Navigate to the second route using Navigator.push() method

                        
                      onPressed: () {  
                        Navigator.push(  
                          context,  
                          MaterialPageRoute(builder: (context) => SecondRoute()),  
                        );  
                      } 
                    

STEP 4: Return to the first route using Navigator.pop() method

                      onPressed: () {  
                        Navigator.pop(context);  
                      }
                      

STEP 5: in main.dart

                       import 'package:flutter/material.dart';  
  
                        void main() {  
                          runApp(MaterialApp(  
                            title: 'Flutter Navigation',  
                            theme: ThemeData(  
                              // This is the theme of your application.  
                              primarySwatch: Colors.green,  
                            ),  
                            home: FirstRoute(),  
                          ));  
                        }

                      

STEP 6: Navigation with Named Routes

We have learned how to navigate to a new screen by creating a new route and manage it by using the Navigator. The Navigator maintains the stack-based history of routes. If there is a need to navigate to the same screen in many parts of the app, this approach is not beneficial because it results in code duplication. The solution to this problem can be removed by defining the named routes and can use the named routes for navigation.

we need to create two screens.

                      class HomeScreen extends StatelessWidget {  
  @override    
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Home Screen'),  
      ),  
      body: Center(  
        child: RaisedButton(  
          child: Text('Click Here'),  
          color: Colors.orangeAccent,  
          onPressed: () {  
            //  
          },  
        ),  
      ),  
    );  
  }  
}  
  
class SecondScreen extends StatelessWidget {  
  @override    
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text("Second Screen"),  
      ),  
      body: Center(  
        child: RaisedButton(  
          color: Colors.blueGrey,  
          onPressed: () {  
            //  
          },  
          child: Text('Go back!'),  
        ),  
      ),  
    );  
  }  
}  

STEP 7: Define the routes

MaterialApp(  
      title: 'Named Route Navigation',  
      theme: ThemeData(  
        // This is the theme of your application.  
        primarySwatch: Colors.green,  
      ),  
      // It start the app with the "/" named route. In this case, the app starts  
      // on the HomeScreen widget.  
      initialRoute: '/',  
      routes: {  
        // When navigating to the "/" route, build the HomeScreen widget.  
        '/': (context) => HomeScreen(),  
        // When navigating to the "/second" route, build the SecondScreen widget.  
        '/second': (context) => SecondScreen(),  
      },  
));  

STEP 8 : Navigate to the second screen using the Navigator.pushNamed() function.

onPressed: () {  
  // Navigate to the second screen by using the named route.  
  Navigator.pushNamed(context, '/second');  
}

STEP 9 : Use a Navigator.pop() function to return to the first screen.

onPressed: () {  
  Navigator.pushNamed(context, '/second');  
},  

Complete code

import 'package:flutter/material.dart';  
  
  void main() {  
    runApp( MaterialApp(  
      title: 'Named Route Navigation',  
      theme: ThemeData(  
        // This is the theme of your application.  
        primarySwatch: Colors.green,  
      ),  
      // Start the app with the "/" named route. In this case, the app starts  
      // on the FirstScreen widget.  
      initialRoute: '/',  
      routes: {  
        // When navigating to the "/" route, build the FirstScreen widget.  
        '/': (context) => HomeScreen(),  
        // When navigating to the "/second" route, build the SecondScreen widget.  
        '/second': (context) => SecondScreen(),  
      },  
    ));  
  }  
    
  class HomeScreen extends StatelessWidget {  
    @override    
    Widget build(BuildContext context) {  
      return Scaffold(  
        appBar: AppBar(  
          title: Text('Home Screen'),  
        ),  
        body: Center(  
          child: RaisedButton(  
            child: Text('Click Here'),  
            color: Colors.orangeAccent,  
            onPressed: () {  
              Navigator.pushNamed(context, '/second');  
            },  
          ),  
        ),  
      );  
    }  
  }  
    
  class SecondScreen extends StatelessWidget {  
    @override    
    Widget build(BuildContext context) {  
      return Scaffold(  
        appBar: AppBar(  
          title: Text("Second Screen"),  
        ),  
        body: Center(  
          child: RaisedButton(  
            color: Colors.blueGrey,  
            onPressed: () {  
              Navigator.pop(context);  
            },  
            child: Text('Go back!'),  
          ),  
        ),  
      );  
    }  
  }